<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资库存管理-按分类统计</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
  <div class="p-30">
    <el-row type="flex" class="row-bg" justify="space-between">
    <el-form :inline="true" :model="formInline" ref="formInline" label-width="100px" class="demo-ruleForm">
            <el-form-item label="" prop="name">
                <el-input v-model.trim="formInline.name" placeholder="请输入物资名称"></el-input>
            </el-form-item>
            <el-form-item label=""  prop="goods_id">
              <el-cascader
                  class="w-400px"
                  :clearable="true"
                  :options="goodsall"
                  :props="props"
                  v-model="formInline.goods_id"
				  placeholder="请选择分类名称"
              	clearable
              	 ref='postSelectRef' 
				 @change='postValueChange($event)'
              ></el-cascader>
            </el-form-item>
            <el-form-item label=""  prop="checkcategory_id">
              <el-select v-model="formInline.checkcategory_id" placeholder="请选择所属单位">
                <el-option v-for="(item, index) in checkcategoryall" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select> 
            </el-form-item>           
            <el-form-item>
                <el-button type="primary" @click="searchput('formInline')">搜&ensp;&ensp;索</el-button>
                <el-button @click="resetForm('formInline')">重&ensp;&ensp;置</el-button>
            </el-form-item>
        </el-form>

       <el-row>
         <el-button type="primary"><a href="{{route('admin.warehouse.referweb')}}" style="display:block;color:#fff;text-decoration:none">入&ensp;&ensp;库</a></el-button>
         <el-button type="primary"><a href="{{route('admin.warehouse.outbound')}}" style="display:block;color:#fff;text-decoration:none">出&ensp;&ensp;库</a></el-button>
         <el-button type="primary"  @click="downloadExcel()"><span style="display:block;color:#fff;text-decoration:none"><i class="el-icon-download"></i>导&ensp;&ensp;出</span></el-button>
       </el-row>
    </el-row>
    <template>
    <el-row>
       <el-col  :span="24" class="border_1">
            <el-row :gutter="20" >
                <el-col :span="6"><div class="grid-content bg-purple text-center">
                  <span>总&ensp;&ensp;数</span>
                  <el-divider></el-divider>
                  <b>@{{referwebdata.income_warehouse}}</b></div>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple text-center">
                  <span>库&ensp;&ensp;存</span>
                  <el-divider></el-divider>
                  <b>@{{referwebdata.warehouse}}</b></div>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple text-center">
                  <span>出&ensp;&ensp;库</span>
                  <el-divider></el-divider>
                  <b>@{{referwebdata.leave_warehouse}}</b></div>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple text-center">
                  <span>损&ensp;&ensp;耗</span>
                  <el-divider></el-divider>
                  <b>@{{referwebdata.loss_warehouse}}</b></div>
                </el-col>           
            </div>
       </el-col>
    </el-row>
    <br>
</template>
<template>
  
    <el-button @click="tabnav_cid()" class="el-button1">按物资分类统计</el-button>
    <el-button @click="tabnav_com()" class="el-button1 isactive">按所属单位统计</el-button>
 
</template>
    <template>
    <el-table  :data="stocklistdata"  border  style="width: 100%" v-loading="loading"> 
	
	        <el-table-column prop="id" label="序&ensp;&ensp;号"  width="70"> </el-table-column>
            <el-table-column prop="checkcategory.name" label="所属单位（人）" sortable width="150"> </el-table-column>
            <el-table-column prop="company.comName" label="单位（个人）名称"  width="200" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="material_list.name" label="物资名称" width=""> </el-table-column>
            <el-table-column prop="goods.name" label="物资分类" width=""> </el-table-column>
            <el-table-column prop="income_warehouse" label="入库数量" width=""> </el-table-column>
            <el-table-column prop="warehouse" label="库存数量" width=""> </el-table-column>
            <el-table-column prop="leave_warehouse" label="出库数量" width=""> </el-table-column>
            <el-table-column prop="loss_warehouse" label="损耗数量" width=""> </el-table-column>
            <el-table-column prop="company.address" label="具体位置"  width="200" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="company.leader" label="联系人" width="65"> </el-table-column>
            <el-table-column prop="company.leaderPhone" label="联系电话" width="120"> </el-table-column>
     
        </el-table><br>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[15,30,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>
    </template>


  </div>

</div>

<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
      id:'',
      loading: false,
      referwebdata:'',//库存数
      stocklistdata: [], //物资数据
      goodsall:[],//下拉分类
      checkcategoryall:[],//下拉单位

      currentPage: 1, // 当前页码
      count: 15, // 总条数
      pageSize: 15,// 每页的数据条数

      formInline:{
        name:null,
        goods_id:'',
        checkcategory_id:'',
      },

      title:'',
      dialogFormVisible:false,

      activeName: 'first',
	  props: {
	    value: 'id',
	    label: 'name',
	    children: 'children',
	    checkStrictly: true,
	  },
	  CascaderLabel:'',
      rules: {
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 4, max: 60, message: '长度在 4 到 60 个字符', trigger: 'blur' }
          ],
        },
    }
  },
  created() {
    this.getUrlKey();
    this.getreferwebdata();
    this.getstocklistdata();
    this.getgoodsall();
    this.getdatacom()
  },

  methods: {
          //获取当前浏览器地址url中的id
          getUrlKey() {
          var url = window.location.href ;             //获取当前url
          var dz_url = url.split('#')[0];              //获取#/之前的字符串
          if (dz_url.split('?')[1]) {
          	var cs = dz_url.split('?')[1];
          	var cs_arr = cs.split('&');                  //参数字符串分割为数组
          	var cs={};
          	for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
          	  cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
          	}
          	this.id = cs.id;
			if(this.id != undefined){
				this.id = cs.id;
			}else{
				this.id = 0
			}
          }else{
          	this.id = 0
          };
          console.log("this.id:"+this.id);
          },
         // 删除列表行
         async deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {                  
                  axios.post('/admin/materialList/delete',{id:rows.id})
                    .then(response =>{
                      this.getstocklistdata()                     
                    }).catch(error =>{
                       this.$message.error(response.data.message)
                    })
                })
          },
          //库存数
          getreferwebdata() {  
			  let vm = this
			  let pagram = {
			  	id: vm.id,
			  	name:vm.formInline.name,
			  	checkcategory_id:vm.formInline.checkcategory_id,
			  }
            axios.post('/admin/goods/getcount',pagram)
            .then(res =>{
              console.log(res.data.data.income_warehouse);
                this.referwebdata = res.data.data;
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          }, 
          //按物资单位统计列表
          getstocklistdata() {    
            this.loading = true  
            let vm = this 
			let pagram = {
				name:vm.formInline.name,
				goods_id:vm.id,
				checkcategory_id:vm.formInline.checkcategory_id,
				limit:vm.pageSize,
				page: vm.currentPage,
			}
            axios.post('/admin/stock/stocklistdata',pagram)
            .then(response =>{
                vm.stocklistdata = response.data.data;
                vm.count = response.data.count; 
                vm.loading = false; 
            }).catch(error =>{
                console.log('请求失败：' + error);
                vm.loading = false; 
            })
          }, 

          // 下拉分类
          async getgoodsall() {   
            let vm = this 
            axios.post('/admin/goods/goods_all')
            .then(response =>{
                vm.goodsall = response.data.data;
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          }, 
         // 下拉单位
         async getdatacom() {   
            let vm = this 
            axios.post('/admin/stock/checkcategory_all')
            .then(response =>{
                vm.checkcategoryall = response.data.data;
            }).catch(error =>{
                console.log('请求失败：' + error);
            })

          }, 


          // 搜索事件         
          searchput(){
            this.currentPage = 1;
			let vm = this
			vm.id = vm.CascaderLabel
            this.getstocklistdata() 
            this.getreferwebdata()  
          }, 
          resetForm(formName) {
            this.$refs[formName].resetFields();
			let vm = this
			vm.id = 0
            this.getstocklistdata()
			this.getreferwebdata()
          },
          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
			      this.currentPage = 1;
			      this.pageSize = val;
            this.getstocklistdata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
			      this.currentPage = val;
            this.getstocklistdata()
					  
          },
           // 带参数跳转到详情页面
           handleClick(row) {
            window.open("{{ route('admin.warehouse.materialdetails') }}?id="+ row.id,'_parent')
            },
           tabnav_cid() {
            let id = this.id
             window.open("{{ route('admin.warehouse.stockcontrol') }}?id="+ id,'_self')
            },
           tabnav_com() {
            let id = this.id
            window.open("{{ route('admin.warehouse.stockcontrolcom') }}?id="+ id,'_self')
            },
			//导出文件
			downloadExcel() {
			  let vm = this
			  axios.post('/admin/stock/stockexportone',{name: vm.formInline.name,goods_id:vm.id,checkcategory_id:vm.checkcategory_id})
			      .then((res) => {
			        let url = res.data.url
			        let file_name = res.data.file_name
			        let link = document.createElement("a");
			        link.style.display = "none";
			        link.href = url;
			        link.setAttribute = file_name;
			        document.body.appendChild(link);
			        link.click();
			        document.body.removeChild(link)
			      })
			      .catch((err) => {
			        console.log(err);
			      });
			  },
			  postValueChange(value) {
			  	if(this.$refs["postSelectRef"].getCheckedNodes()[0]){
			  		let pathlabel = this.$refs["postSelectRef"].getCheckedNodes()[0].uid
			  		this.CascaderLabel = pathlabel + 1
					console.log(this.CascaderLabel,'eeeeee');
			  	}			  
			  },

    },

  })

</script>
<style scoped>
  .el-row2 {
    border:1px solid #e5e9f2;
    margin-bottom: 20px;   
  }
  .el-col {
    border-radius: 4px;

  }

  .bg-purple-light {
    border:1px solid #e5e9f2;
  }
  .grid-content {
    border-radius: 0px;
    min-height: 36px;
    border-right:1px solid #ddd;
    padding:5px;
  }
  .el-table .el-table__cell:first-child{text-align: center;}
  .border_1{border:1px solid #ddd;padding:10px}
  .el-divider--horizontal {margin: 5px auto;width: 40%;}
  .grid-content{border-right:1px solid #ddd;}
  .el-col-6:last-child .grid-content{border-right:0 solid #ddd;}
  button.el-button1 { border: 0;padding: 12px 20px 10px; border-radius: 0;margin-bottom:5px}
  button.isactive {  color: #409eff;border-bottom: 2px solid #409eff}
  .el-table .cell{line-height:30px}
</body>
</html>
